<template>
  <view :style="'padding:15px;max-height:'+window_height">

    <u-sticky>
      <u-search :animation="true" :showAction="true" actionText="搜索" placeholder="店铺名称"></u-search>
    </u-sticky>

    <u-list
        @scrolltolower="scrollToLower"
    >
      <u-list-item
          v-for="(item, index) in shop_list"
          :key="index"
      >
        <navigator :url="`/pages/shop/detail?shop_id=`+item.shop_id" class="shop-item" hover-class="none">
          <image :src="item.headimg_url" mode="heightFix"></image>
          <view class="infos">
            <view class="dw-list-main-title">{{ item.nickname }}</view>
            <view class="dw-list-sub-title">
              <text v-for="(c,ci) in item.main_categories" :key="ci">{{ c }}</text>
            </view>
            <text class="dw-list-sub-title">上架商品
              <text class="dw-number">{{ item.product_count }}</text>
              件
            </text>
          </view>
        </navigator>
      </u-list-item>
    </u-list>

  </view>
</template>

<script>

import {getShopList} from "@/api/shop";

export default {
  data() {
    return {
      shop_list: [],
      next_key: '',
      has_more: true,
      window_height: 0,
    }
  },
  onLoad() {
    // 获取屏幕高度
    // 获取屏幕高度
    const sys_info = uni.getSystemInfoSync()
    this.window_height = sys_info.windowHeight

    this.getShopList()
  },
  methods: {
    // 获取店铺列表
    getShopList() {
      getShopList({
        next_key: this.next_key,
        page_size: 20,
      }).then(res => {
        console.log("店铺列表：", res)
        this.shop_list = this.shop_list.concat(res.list)
        this.next_key = res.next_key
        this.has_more = Boolean(res.has_more)
      })
    },
    scrollToLower() {
      if (!this.has_more) {
        return
      }
      this.getShopList()
    },
  }
}
</script>

<style lang="scss" scoped>
.shop-item {
  display: flex;
  flex-direction: row;
  align-items: center;

  image {
    height: 100px;
    border-radius: 4px;
  }

  .infos {
    padding-left: 10px;
  }
}

</style>
